<template>
  <AvatarImg v-bind="{ ...$attrs }" v-if="avatarType === 1" />
  <AvatarText v-bind="{ ...$attrs }" v-else-if="avatarType === 2" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import AvatarImg from "./avatar-text.vue";
import AvatarText from "./avatar-img.vue";

defineProps({
  avatarType: {
    type: Number,
    default: 2,
  },
});
</script>

<style scoped lang="less">
a {
  text-decoration: none;
}
.navagation {
  width: 100%;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
}
.avatar {
  width: 45px;
  height: 45px;
  border-radius: 100%;
  position: relative;
}
.menu-item {
  padding-left: 50px;
  padding-right: 50px;
  background-color: var(--header-nav) !important;
}
.el-menu {
  background-color: var(--header-nav) !important;
}
.el-menu-item:not(.is-disabled):hover {
  color: var(--nav-text) !important;
  background-color: var(--header-nav) !important;
  background-color: var(--hover-bg) !important;
}
.el-menu-item.is-active {
  color: var(--nav-text) !important;
  border-bottom: solid 2px var(--nav-text) !important;
  background-color: var(--hover-bg) !important;
}
.good-menu a span {
  color: var(--classify-text);
}
.good-menu a span:hover {
  color: var(--classify-text-hover) !important;
}
.el-dropdown {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.el-dropdown-link-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
